<template>
  <div class="show-code">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    >
      <template v-if="$store.state.user.show" />
    </header-bar>-->
    <div ref="content" class="order-content">
      <div class="mixing-station message message-title">
        <div class="icon-title van-cell order-title">
          <svg-icon icon-class="user" class="icon-class" />
          <span class="icon-title-content">基本信息</span>
        </div>

        <van-field
          v-model="person.name"
          label="姓名"
          placeholder="请输入姓名"
          required
          :disabled="$route.query.type==='1'"
        />

        <van-field
          v-model="person.phone"
          label="手机号码"
          placeholder="请输入联系电话"
          type="number"
          required
          :disabled="$route.query.type==='1'"
        />
        <van-cell class="van-cell--required" :disabled="$route.query.type==='1'" title="权限" :value="person.roleText" is-link @click="getAdmin" />

      </div>
      <div v-if="id&&$route.query.type==='1'" class="mixing-station messages">
        <div class="icon-title van-cell order-title">
          <svg-icon icon-class="permission" class="icon-class" />
          <span class="icon-title-content">隔离点权限</span>
        </div>
        <menuTree v-if="menuTreeArr.length!==0" ref="node" :menu-tree-arr="menuTreeArr" />
      </div>

      <!-- <div class="mixing-station">
        <van-field
          v-model="remark"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          placeholder="请输入备注":disabled="state.toString()==='0'"
          show-word-limit
        />
      </div> -->
      <div class="content-info-submit">
        <van-button
          type="info"
          class="van-confirm confirm-message"
          style="margin-bottom:20px;"
          @click="submit"
        >{{ btnName }}</van-button>
      </div>

      <div style="width:100%;height:100px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
    <van-popup v-model="showAre" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="权限"
        show-toolbar
        :columns="columnAre"
        @confirm="onConfirmAre"
        @cancel="showAre=false"
      />
    </van-popup>
  </div>
</template>
<script>
// import { areaList } from '@vant/area-data'
import Vue from 'vue'
import { Switch, Cell, Field, Collapse, CollapseItem, Toast, Icon, Picker, Popup, DatetimePicker, CellGroup, Dialog } from 'vant'
Vue.use(Switch).use(Cell).use(Field).use(Collapse).use(CollapseItem).use(Icon).use(Picker).use(Popup).use(DatetimePicker).use(CellGroup).use(Dialog).use(Toast)
import { Button } from 'vant'
import { Area } from 'vant'
import { RadioGroup, Radio } from 'vant'
import menuTree from './components/orangizeTree.vue'
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Area)
Vue.use(Button)
import $api from '@/api/index'
import { checkPhone, getMessageByMsg } from '@/utils/validate'
import { mapGetters } from 'vuex'
export default {
  components: {
    menuTree
  },
  data() {
    return {
      person: {
        name: '',
        phone: '',
        roleType: '',
        roleText: ''

      },

      show: true,
      id: '',
      btnName: '确认录入',
      menuTreeArr: [],
      showAre: false,
      columnAre: [{ text: '市级管理员', id: 0, disabled: false }, { text: '区县管理员', id: 1, disabled: false }, { text: '上报工作人员', id: 2, disabled: false }]

    }
  },
  computed: {
    ...mapGetters([
      'reportId',
      'reportName',
      'parentName',
      'createId',
      'nation',
      'location'
    ]),
    showTitlePaddingTop() {
      return this.$store.state.user.showTitlePaddingTop
    }
  },
  beforeCreate() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
  },
  activated() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
  },
  mounted() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
    const title = this.$route.query.type === '1' ? '修改人员权限' : this.$route.query.type === '2' ? '修改人员信息' : '新增人员信息'
    this.$dd.ready(() => {
      this.$dd.setTitle({
        title: title
      })
    })
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.person = JSON.parse(this.$route.query.message)
      this.columnAre = this.columnAre.map(item => {
        if (sessionStorage.getItem('userRole') === this.person.roleType) {
          item.disabled = true
        } else if ((Number(sessionStorage.getItem('userRole')) < Number(this.person.roleType)) && sessionStorage.getItem('userRole') !== '0') {
          item.disabled = true
        } else if ((Number(sessionStorage.getItem('userRole')) < Number(this.person.roleType)) && sessionStorage.getItem('userRole') === '0') {
          item.disabled = false
        } else {
          item.disabled = true
        }
        return item
      })
      this.columnAre = this.columnAre.filter(item => {
        return !item.disabled
      })
      this.btnName = '确认修改'
      if (this.$route.query.type === '1') {
        $api.user.organizationMenuTree().then(res => {
          this.person.sysUserRoleRelList = this.person.sysUserRoleRelList ? this.person.sysUserRoleRelList : []
          const arr = this.person.sysUserRoleRelList.map(ite => {
            return ite.organizationCode
          })
          res.data = res.data.map(item => {
            item['name'] = item.organizationName
            if (this.person.roleType === '0') {
              item['checked'] = true
              item['disabled'] = true
            } else {
              if (arr.indexOf(item.organizationCode) > -1) {
                item['checked'] = true
              } else {
                item['checked'] = false
              }
            }

            return item
          })
          this.menuTreeArr = getMessageByMsg(
            res.data
            ,
            {
              id: 'organizationCode',
              pid: 'parentCode',
              children: 'children'
            }
          )
        }, error => {
          Toast(error?.msg?.data)
        })
      }
    } else {
      this.btnName = '确认录入'
      this.id = ''
      if (sessionStorage.getItem('userRole') === '1') {
        this.columnAre = [{ text: '上报工作人员', id: 2, disabled: false }]
      } else {
        this.columnAre = [{ text: '市级管理员', id: 0, disabled: false }, { text: '区县管理员', id: 1, disabled: false }, { text: '上报工作人员', id: 2, disabled: false }]
      }
    }

    if (this.$until.h5userAgent() === 1) {
      this.$store.dispatch('user/showTitle', true)
    }
  },
  beforeDestroy() {
    this.$dd.hideTitleBar()
  },
  destroyed() {
    this.$dd.hideTitleBar()
  },
  methods: {
    goback() {

    },
    saveInfo() {
      if (!this.person.name) {
        Toast('姓名不能为空')
        return
      }
      if (!this.person.phone) {
        Toast('手机号码不能为空')
        return
      }
      if (!this.person.roleType && this.person.roleType !== 0) {
        Toast('请选择权限')
        return
      }
      if (!checkPhone(this.person.phone)) {
        Toast('手机号码格式错误!')
        return
      }

      $api.user.addUserInfo(this.person).then(res => {
        this.show = false
        this.$store.dispatch('user/delView', this.$route.name)
        this.$store.dispatch('user/refresh', true)
        this.$store.dispatch('user/delView', 'Permission')
        this.$router.go(-1)
      }, error => {
        Toast(error.data ? error.data : '操作失败,请稍候重试!')
        console.log(error)
      })
    },

    submit() {
      if (this.id && this.$route.query.type === '1') {
        this.updateInfo()
      } else if (this.$route.query.type === '2') {
        this.updateUserInfo()
      } else {
        this.saveInfo()
      }
    },
    updateUserInfo() {
      if (!this.person.name) {
        Toast('姓名不能为空')
        return
      }
      if (!this.person.phone) {
        Toast('手机号码不能为空')
        return
      }
      if (!checkPhone(this.person.phone)) {
        Toast('手机号码格式错误!')
        return
      }
      this.person['id'] = this.id
      $api.user.updateUserInfo(this.person).then(res => {
        this.show = false
        this.$store.dispatch('user/refresh', true)
        sessionStorage.setItem('keepAlive', true)// 修改返回更新数据
        this.$router.go(-1)
      })
    },
    quarantineDetail() {
      $api.user.quarantineDetail({ id: this.id, createId: this.createId }).then(res => {
        this.person = res.data
        this.person.acidResult ? this.arrAre = JSON.parse(this.person.acidResult) : ''
      })
    },
    updateInfo() {
      this.person['id'] = this.id
      this.person['sysUserRoleRelList'] = this.$refs.node.getNodesArr()
      this.person['managePhone'] = sessionStorage.getItem('phone')
      if (this.person.sysUserRoleRelList.length === 0 && this.person.roleType !== '0') {
        Toast('请选择隔离点!')
        return
      }
      if (this.person.roleType === '0') {
        this.person.sysUserRoleRelList = []
      }
      $api.user.AuthOrganizationRole(this.person).then(res => {
        this.show = false
        this.$store.dispatch('user/refresh', true)
        sessionStorage.setItem('keepAlive', true)// 修改返回更新数据
        this.$router.go(-1)
      })
    },
    getAdmin() {
      if (!this.$route.query.type || this.$route.query.type === '2') {
        this.showAre = true
      }
    },
    onConfirmAre(value, index) {
      this.person.roleType = value.id
      this.person.roleText = value.text
      this.showAre = false
    }

  }
}
</script>
<style lang="scss" scoped>
.show-code{
    width:100%;
    height:100%;

    .order-content{
        width:100%;
        height:100%;
        overflow-y: scroll;
        background-color:#f7f8fa;
        font-family: PingFangSC-Regular, PingFang SC;
    }
}
.mixing-station{
    background-color: #ffffff;
    padding:0px 10px;
    margin-top:20px;
}
.icon-class{
  width:40px;
  height:40px;
}
.order-title{
    padding: 20px 30px;
}

.content-info-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:44px;
  width:660px;
  height:88px;
  margin:0 auto;
}
::v-deep .van-button__text{
  font-weight:500;
  font-size:32px;
}
.title-message{
  padding-top:80px;
}
.van-confirm{
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow: 5px 3px 15px 0px rgba(42, 102, 234, 0.56);
}
.icon-title{
    display: flex;
    align-items: center;
}
.icon-title-content{
    padding-left: 20px;
    color: #333333;
    font-weight: Bold;
    font-size: 32px;
}
.mixing-station:not(:first-child){
    margin-top: 20px;
}

::v-deep [class*=van-hairline]::after{
    border: 0;
}
::v-deep .station{
}

 .message {
    ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 200px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }
}
.messages{
  ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 250px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }

}
.test .van-cell__value{
    display: flex;
    align-items:center;
}

.tests .van-cell__value{
    display: flex;
    align-items:center;
    position:relative;
}
.stop-update ::v-deep .van-cell__value{
    color:#969799;
  }

  .content-person{
    padding:40px 20px;
    font-size:28px;
    color:#646566;
  }
  ::v-deep .van-cell__value{
    font-size:28px;
    color:#646566;
    padding:0 20px;
    // color: #323233;
  }
 ::v-deep .van-cell__title{
    width:200px;
    font-size:28px;
    padding-right:15px;
  }
</style>
